<template>
  <div class="result-view" v-if="result">
    <h2>你的 MBTI 类型是：<span class="mbti-type">{{ result.type }}</span></h2>
    <p>{{ descriptions[result.type] || "暂无该类型解释" }}</p>
  </div>
  <div v-else>
    <p>暂无测试结果，请先完成测试。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      result: null,
      descriptions: {
        ISTJ: "认真负责，实事求是的守护者。",
        ISFJ: "忠诚体贴，乐于助人的保护者。",
        INFJ: "理想主义者，注重内心感受和价值。",
        INTJ: "战略家，擅长规划和解决复杂问题。",
        ISTP: "冷静务实的实干家。",
        ISFP: "温和谦逊，富有艺术气息。",
        INFP: "理想主义者，富有同情心。",
        INTP: "逻辑严密，善于分析。",
        ESTP: "热情奔放，擅长应变。",
        ESFP: "开朗活泼，善于社交。",
        ENFP: "充满热情，富有创造力。",
        ENTP: "机智灵活，喜欢挑战。",
        ESTJ: "组织能力强，务实领导。",
        ESFJ: "友善热心，注重人际关系。",
        ENFJ: "有感染力的领导者。",
        ENTJ: "果断坚定的执行者。",
      },
    };
  },
  mounted() {
    const res = localStorage.getItem("mbtiResult");
    if (res) {
      this.result = JSON.parse(res);
    }
  },
};
</script>

<style scoped>
.result-view {
  max-width: 600px;
  margin: 40px auto;
  text-align: center;
  font-family: Arial, sans-serif;
}

.mbti-type {
  color: #409EFF;
  font-size: 32px;
  font-weight: bold;
}
</style>
